<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisibleNew"
    append-to-body
    width="470"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="auto" label-position="right">
      <el-form-item label="部门：" style="text-align: right" label-width="100px">
        <div class="bigBox-box-tab-item-xq">
          {{ form.orgName }}
        </div>
      </el-form-item>
      <el-form-item
        label="姓名"
        style="text-align: right"
        label-width="100px"
        hide-required-asterisk="true"
        :rules="[
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ]"
        prop="name"
      >
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号"
        style="text-align: right"
        label-width="100px"
        hide-required-asterisk="true"
        :rules="[
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            min: 11,
            max: 11,
            message: '请输入11位手机号',
            trigger: 'blur'
          }
        ]"
        prop="phone"
      >
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item
        label="职务"
        style="text-align: right"
        label-width="100px"
        hide-required-asterisk="true"
        :rules="[
          {
            required: true,
            message: '请输入职务',
            trigger: 'blur'
          }
        ]"
        prop="job"
      >
        <el-input v-model="form.job"></el-input>
      </el-form-item>
      <div style="display: flex; justify-content: flex-end">
        <el-button
          @click="DialogVisibleNew(1)"
          style="
            background: #1d5a8f;
            border-radius: 4px;
            border: 1px solid #7cadd8;
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 0.9);
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { uNew } from '@/api/resourceManagement/index.js'
export default {
  data() {
    return {
      dialogVisibleNew: false,
      form: {
        name: '',
        orgName: '',
        phone: '',
        job: '',
        id: ''
      }
    }
  },
  props: ['isdialogVisibleNew', 'department'],
  watch: {
    isdialogVisibleNew: {
      handler(n, o) {
        if (n == 0) {
          this.dialogVisibleNew = false
        } else {
          this.dialogVisibleNew = true
        }
      },
      deep: true // 是否深度监听
    }
  },
  mounted() {
    console.log(this.$userInfo.phone)
    this.form.orgName = this.$userInfo.orgName
  },
  methods: {
    handleClose() {
      this.$emit('jianting', 0)
    },
    submitForm(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          this.$emit('jianting', 0)
          this.dialogVisibleNew = false
          this.form.createdBy = this.$userInfo.phone
          this.form.menuId = this.$userInfo.menuId
           this.$emit('name', this.form)
          uNew(this.form).then(res => {
             this.$message.success("保存成功")
            console.log(res)
            this.form.id = res.data
            let list  = this.form
            console.log(1234,list)
            this.$emit('name', list)
            this.$nextTick(() => {
              this.form = {
                name: '',
                orgName: this.$userInfo.orgName,
                phone: '',
                job: '',
                id: ''
              }
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    DialogVisibleNew(e) {
      this.$emit('jianting', 0)
      this.dialogVisibleNew = false
      this.form = {
        name: '',
        orgName: this.$userInfo.orgName,
        phone: '',
        job: '',
        id: ''
      }

      this.$emit('name', this.form)
    }
  }
}
</script>

<style lang="scss">
.el-dialog {
  background: transparent;
  .el-dialog__header {
    background: rgba(6, 50, 88, 0.9);
    padding: 20px 0 0 20px;
    height: 24px;
    line-height: 24px;
  }

  .el-dialog__title {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }

  .el-dialog__headerbtn {
    top: 20px;
    right: 20px;
    height: 14px;
    line-height: 14px;
    .el-dialog__close {
      // color: #354052;
      color: #4af6fc;
      width: 14px;
      height: 14px;
    }
  }

  .el-dialog__body {
    width: calc(100% - 40px);
    padding: 30px 20px 20px;
    // font-size: 0.16px;
    font-size: 0.18px;
    color: #313335;
    background: rgba(6, 50, 88, 0.9);
  }
  .el-dialog__footer {
    background: rgba(6, 50, 88, 0.9) !important;
  }
}
.bigBox-box-tab-item-xq {
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog {
    .el-dialog__header {
      .el-dialog__headerbtn {
        font-size: 14px;
      }
      .el-icon-close:before {
        color: #4af6fc;
      }
    }
  }
}
</style>
